<template>
  <div>
    <h1>按钮测试页面</h1>
    <sem-headline>1-自定义按钮内容</sem-headline>
    <sem-button>按钮</sem-button>
    <sem-button>按钮2</sem-button>
    <sem-button>按钮3</sem-button>
    <sem-headline>自定义按钮尺寸-semantic通过添加类名改变按钮大小</sem-headline>
    <button class="small ui button">Small</button>
    <button class="massive ui button">Massive</button>
    <sem-headline>2-自定义按钮尺寸-通过size属性写入关键字控制-vue实现</sem-headline>
    <sem-button size="massive">按钮</sem-button>
    <sem-button>按钮2</sem-button>
    <sem-button>按钮3</sem-button>
    <sem-headline>按钮支持动画</sem-headline>
    <!-- //------------------------------------------------- -->
    <div class="ui animated button" tabindex="0">
      <div class="visible content">Next</div>
      <div class="hidden content">
        <i class="right arrow icon"></i>
      </div>
    </div>
    <div class="ui vertical animated button" tabindex="0">
      <div class="hidden content">Shop</div>
      <div class="visible content">
        <i class="shop icon"></i>
      </div>
    </div>
    <div class="ui animated fade button" tabindex="0">
      <div class="visible content">Sign-up for a Pro account</div>
      <div class="hidden content">每月12.99美元</div>
    </div>
    <sem-headline>3-按钮支持动画</sem-headline>
    <sem-button animated>
      <div slot='hidden'>$100,000</div>
      <div slot='visible'>来呀！水平方向</div>
    </sem-button>
     <sem-button animated="fade">
      <div slot='hidden'>$100,000</div>
      <div slot='visible'>缩放按钮</div>
    </sem-button>
    <sem-button animated="vertical">
      <div slot='hidden'>$100,000</div>
      <div slot='visible'>
        <i class="shop icon"></i>
      </div>
    </sem-button>
    <sem-headline>4-按钮添加点击功能</sem-headline>
    <sem-button @click="hClick" color="blue"></sem-button>
    <sem-button loading color="red">加载按钮</sem-button>
  </div>
</template>
<script>
export default {
  name: 'test-button',
  methods: {
    hClick () {
      alert('我被点击了')
    }
  }
}
</script>
<style>
.ui.button {
  margin: 5px;
}
</style>
